<template>
    <div class="app-container">
        <!-- 顶部 Header -->
        <mt-header fixed title="我的世界~vue">
            <span @click="goBack" slot="left" v-show="flag">
                <mt-button icon="back">返回</mt-button>
            </span>
        </mt-header>

        <!-- 路由 router-view -->
        <transition>
            <router-view></router-view>
        </transition>

        <!-- 底部 Tabbar -->
        <tabbar></tabbar>
    </div>
</template>

<script>
    import Tabbar from './components/common/tabbar/Tabbar.vue'

    export default {
        name: "",
        data(){
            return {
                flag: false //false 隐藏
            }
        },
        created(){
            this.flag = !(this.$route.path==='/home')
        },
        components: {
            Tabbar
        },
        methods: {
            goBack(){
                this.$router.go(-1)
            }
        },
        watch: {
            '$route.path': function (newVal) {
                console.log(newVal);
                if(newVal==='/home'){
                    this.flag = false
                }else{
                    this.flag = true
                }
            }
        }
    }
</script>

<style scoped>
    .mint-header{
        z-index: 99;
    }

    .app-container {
        padding: 40px 0 50px;
        overflow-x: hidden;
    }

    .v-enter{
        opacity: 0;
        transform: translateX(100%);
    }
    .v-leave-to{ /* 离场动画 */
        opacity: 0;
        transform: translateX(-100%);
        position: absolute; /* 解决内容弹到顶部问题 */
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.5s ease;
    }
</style>